// +----------------------------------------------------------------------
// | xbui
// +----------------------------------------------------------------------
// | 博客 www.xoweb.cn
// +----------------------------------------------------------------------
// | Author: 小幸运 <15721271@qq.com>
// +----------------------------------------------------------------------

// ---- color ----
$x-color-primary: #FD891F;
$x-color-secondary: #CAD6B2;
$x-color-success: #6CE03A;
$x-color-info: #46E4FC;
$x-color-warning: #FF6816;
$x-color-red: #fc0107;
$x-color-light: #F2F5FE;
$x-color-dark: #343a40;
$x-border-color: #e6e6e6;

// 颜色
$color:
  ('primary' $x-color-primary),
  ("secondary" $x-color-secondary),
  ("success" $x-color-success),
  ("info" $x-color-info),
  ("warning" $x-color-warning),
  ("red" $x-color-red),
  ("light" $x-color-light),
  ("dark" $x-color-dark),
  ("black" #333333),
  ("white" #ffffff);

// 边距
$margin-padding:
  ('0' 0px),
  ('s' 5px),
  ("m" 15px),
  ("l" 25px),
  ("xl" 35px),
  ("xxl" 45px);

// 宽高
$width-height:
  ('s' 40px),
  ("m" 70px),
  ("l" 100px),
  ("xl" 130px),
  ("xxl" 160px);

/* 解决图片闪烁问题  */
image{will-change: transform}

/* 定义宽高  */
.w-100{width: 100%!important ;}

/* 按钮 */
.x-button{font-size:28px; line-height:80px; padding:0; border-radius:6px;width: 100%;}
.x-button:after {border: none !important;}

.x-padding{padding-left: 25px;padding-right: 25px;}
.x-margin{margin-left: 25px;margin-right: 25px;}
.x-padding-top{padding-top: 25px;}
.x-padding-bottom{padding-bottom: 25px;padding-bottom: 25px;}
.x-padding-top-small{padding-top: 15px;}
.x-padding-bottom-small{padding-bottom: 15px;padding-bottom: 15px;}
.x-margin-top{margin-top: 25px;}
.x-margin-bottom{margin-bottom: 25px;margin-bottom: 25px;}
.x-margin-top-small{margin-top: 15px;}
.x-margin-bottom-small{margin-bottom: 15px;margin-bottom: 15px;}

/*  文本  */
.x-h1{font-size:2rem;}
.x-h2{font-size:1.5rem;}
.x-h3{font-size:1.25rem;}
.x-h4{font-size:1rem;}
.x-h5{font-size:.875rem;}
.x-h6{font-size:.75rem;}
.x-bold{font-weight:bold;}
.x-text{font-size:26px; line-height:50px;}
.x-desc{font-size:24px; line-height:44px;}
.x-text-small{font-size:22px; line-height:40px;}
.x-line-through{text-decoration:line-through;}
.x-italic{font-style:italic;}
.x-text-center{text-align:center;}
.x-text-left{text-align:left;}
.x-text-right{text-align:right;}

/* 文本超出隐藏 */
/* #ifdef APP-PLUS */
.x-text-ellipsis-3{lines:3;}
.x-text-ellipsis-2{lines:2;}
.x-text-ellipsis-2{lines:1;}
/* #endif */
/* #ifndef APP-PLUS */
.x-text-ellipsis-1{display:-webkit-box;text-overflow:ellipsis;overflow:hidden;-webkit-line-clamp:1;-webkit-box-orient:vertical;}
.x-text-ellipsis-2{display:-webkit-box;text-overflow:ellipsis;overflow:hidden;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.x-text-ellipsis-3{display:-webkit-box;text-overflow:ellipsis;overflow:hidden;-webkit-line-clamp:3;-webkit-box-orient:vertical;}
/* #endif */

/* 文字颜色 */
.x-{
  @each $item in $color {
    &#{nth($item, 1)} { color: nth($item, 2) !important; }
  }
}
.x-black6{color:#666666;}
.x-black9{color:#999999;}
/* 背景颜色 */
.x-bg-{
  @each $item in $color {
    &#{nth($item, 1)} { background-color: nth($item, 2) !important; }
  }
}

// flex布局
.x-flex{display: flex !important;}
.x-row{flex-direction:row!important;display: flex!important;}
.x-col{flex-direction:column !important;display: flex!important;}
.x-wrap{ flex-direction:row!important; flex-wrap:wrap;display: flex!important;}
.x-nowrap{flex-direction:row!important; flex-wrap:nowrap!important;display: flex !important;}
.x-space-between{flex-direction:row!important; flex-wrap:nowrap!important; justify-content:space-between!important;display: flex!important;}
.x-align-top{align-items:flex-start!important;}
.x-align-center{align-items:center !important;}
.x-align-bottom{align-items:flex-end!important;}
.x-justify-top{justify-content:flex-start!important;}
.x-justify-center{justify-content:center!important;}
.x-justify-bottom{justify-content:flex-end!important;}
.x-justify-space-between{justify-content:space-between!important;}
.x-flex1{flex:1 !important;}
/* 定位 */
.x-footer{position: fixed !important;bottom: 0;left: 0;right: 0;}
.x-header{position: fixed !important;top: 0;left: 0;right: 0;}

/* 边框 */
.x-border{border-style:solid !important; border-width:1px!important; border-color:$x-border-color!important;}
.x-border-l{border-left-style:solid!important; border-left-width:1px!important; border-left-color:$x-border-color!important;}
.x-border-r{border-right-style:solid!important; border-right-width:1px!important; border-right-color:$x-border-color!important;}
.x-border-t{border-top-style:solid!important; border-top-width:1px!important; border-top-color:$x-border-color!important;}
.x-border-b{border-bottom-style:solid!important; border-bottom-width:1px !important; border-bottom-color:$x-border-color!important;}
.x-noborder{border-right-width:0!important; border-top-width:0!important; border-left-width:0!important; border-bottom-width:0!important;}
/* 圆角 */
.x-border-radius{border-radius:100px !important;}
.x-border-radius-medium{border-radius:60px !important;}
.x-border-radius-small{border-radius:30px !important;}
/* 阴影 */
.x-shadow{box-shadow: 0px 6px 18px 0px rgba(0, 0, 0, 0.14);}

/* 定义宽高  */
 @each $item in $width-height {
   .x-wh-#{nth($item, 1)} {width:nth($item, 2) !important;height:nth($item, 2) !important;}
 }

/* 内边距  */
@each $item in $margin-padding {
  .x-p-#{nth($item, 1)} {padding-left:nth($item, 2) !important;padding-bottom:nth($item, 2) !important;padding-top:nth($item, 2) !important;padding-right:nth($item, 2) !important;}
  .x-px-#{nth($item, 1)} {padding-right:nth($item, 2) !important;padding-left:nth($item, 2) !important;}
  .x-py-#{nth($item, 1)} {padding-top:nth($item, 2) !important;padding-bottom:nth($item, 2) !important;}
  .x-pt-#{nth($item, 1)} {padding-top:nth($item, 2) !important;}
  .x-pr-#{nth($item, 1)} {padding-right:nth($item, 2) !important;}
  .x-pb-#{nth($item, 1)} {padding-bottom:nth($item, 2) !important;}
  .x-pl-#{nth($item, 1)} {padding-left:nth($item, 2) !important;}
}

/* 外边距  */
@each $item in $margin-padding {
  .x-m-#{nth($item, 1)} {margin-left:nth($item, 2) !important;margin-bottom:nth($item, 2) !important;margin-top:nth($item, 2) !important;margin-right:nth($item, 2) !important;}
  .x-mx-#{nth($item, 1)} {margin-right:nth($item, 2) !important;margin-left:nth($item, 2) !important;}
  .x-my-#{nth($item, 1)} {margin-top:nth($item, 2) !important;margin-bottom:nth($item, 2) !important;}
  .x-mt-#{nth($item, 1)} {margin-top:nth($item, 2) !important;}
  .x-mr-#{nth($item, 1)} {margin-right:nth($item, 2) !important;}
  .x-mb-#{nth($item, 1)} {margin-bottom:nth($item, 2) !important;}
  .x-ml-#{nth($item, 1)} {margin-left:nth($item, 2) !important;}
}
